{% extends 'web/base.html' %}
{% load staticfiles %}
{% block base_title %} 我的订单 {% endblock %}

<!--{% block manifest %}appcache/tabs.appcache{% endblock %}-->
{% block base_run %}tabs{% endblock %}

{% block base_body %}
{% verbatim %}
<div id="tabs" class="all_bg scroll">
    <div v-if="loding"></div>
    <div v-else class="load_fix">
        <div class="zuan_center">
            <div class="ui active centered inline loader red" style="top: 50%;transform: scale(.6)"></div>
        </div>
    </div>
    <div class="xuanBox">
        <ul>
            <li class="xuan_li xuan_active">全部</li>
            <li class="xuan_li">待付款</li>
            <li class="xuan_li">已付款</li>
        </ul>
    </div>
    <div class="zuan_content">
        <!--全部-->
        <div class="zuan_all">
            <div class="zuan_buy" v-for="tab in allTab">
                <div class="zuan_buy_t">
                    <div class="zuan_buy_tl">
                        <div class="zuan_buy_tli"></div>
                        <div class="zuan_buy_txt" v-if="tab.cate==1">股票钻石</div>
                        <div class="zuan_buy_txt" v-else="tab.cata==2">期货钻石</div>
                    </div>
                    <div class="zuan_buy_tr" v-if="tab.status==1">
                        待付款
                    </div>
                    <div class="zuan_buy_tr" v-else="tab.status==2">
                        交易成功
                    </div>
                </div>
                <a :href="'/xz/login/?phone='+phone+'&pass='+pass+'&redir=unpaid'">
                <div v-if="tab.status==1" cid="1" onclick="localStorage.setItem('tabId',$(this).attr('tabid'))" :tabid="tab.od_id" class="zuan_buy_b">
                    <div class="zuan_buy_img">
                        <img :src="'http://www.zgtxcj.com/'+tab.image" height="100%">
                    </div>
                    <div class="zuan_buy_tx">
                        <p class="zuan_buy_p1">{{ tab.name }}专享</p>
                        <div class="zuan_buy_p2">
                            <p style="float: right">{{ tab.num }}个月</p>
                        </div>
                        <div class="zuan_buy_mon">
                            实付款：￥{{ tab.dpayprice*tab.num }}
                        </div>
                    </div>
                </div>
                </a>
                <a :href="'/xz/login/?phone='+phone+'&pass='+pass+'&redir=order'">
                <div  v-if="tab.status==2" cid="2" onclick="localStorage.setItem('tabId',$(this).attr('tabid'))" :tabid="tab.od_id" class="zuan_buy_b">
                    <div class="zuan_buy_img">
                        <img :src="'http://www.zgtxcj.com/'+tab.image" height="100%">
                    </div>
                    <div class="zuan_buy_tx">
                        <p class="zuan_buy_p1">{{ tab.name }}专享</p>
                        <div class="zuan_buy_p2">
                            <p style="float: right">{{ tab.num }}个月</p>
                        </div>
                        <div class="zuan_buy_mon">
                            实付款：￥{{ tab.dpayprice*tab.num }}
                        </div>
                    </div>
                </div>
                </a>
            </div>
        </div>
        <!--未付款-->
        <div class="zuan_unpaid" style="display: none">

            <div class="zuan_buy" v-for="peng in pengTab">
                <div class="zuan_buy_t">
                    <div class="zuan_buy_tl">
                        <div class="zuan_buy_tli"></div>
                        <div class="zuan_buy_txt" v-if="peng.cate==1">股票钻石</div>
                        <div class="zuan_buy_txt" v-else="peng.cate==2">期货钻石</div>
                    </div>
                    <div class="zuan_buy_tr">
                        待付款
                    </div>
                </div>
                <a :href="'/xz/login/?phone='+phone+'&pass='+pass+'&redir=unpaid'">
                <div @click="getunpaid()" onclick="localStorage.setItem('tabId',$(this).attr('tabid'))" :tabid="peng.od_id" class="zuan_buy_b">
                    <div class="zuan_buy_img">
                        <img :src="'http://www.zgtxcj.com/'+peng.image" height="100%">
                    </div>
                    <div class="zuan_buy_tx">
                        <p class="zuan_buy_p1">{{ peng.name }}专享</p>
                        <div class="zuan_buy_p2">
                            <p style="float: right">{{ peng.num }}个月</p>
                        </div>
                        <div class="zuan_buy_mon">
                            实付款：￥{{ peng.dpayprice*peng.num }}
                        </div>
                    </div>
                </div>
                </a>
            </div>
        </div>
        <!--已付款-->
        <div class="zuan_paid" style="display: none">
            <div class="zuan_buy" v-for="paid in paidTab" >
                <div class="zuan_buy_t">
                    <div class="zuan_buy_tl">
                        <div class="zuan_buy_tli"></div>
                        <div class="zuan_buy_txt" v-if="paid.cate==2">期货钻石</div>
                        <div class="zuan_buy_txt" v-else="paid.cate==1">股票钻石</div>
                    </div>
                    <div class="zuan_buy_tr">
                        交易成功
                    </div>
                </div>
                <a :href="'/xz/login/?phone='+phone+'&pass='+pass+'&redir=order'">
                <div @click="getTabid()" onclick="localStorage.setItem('tabId',$(this).attr('tabid'))" :tabid="paid.od_id" class="zuan_buy_b">
                    <div class="zuan_buy_img">
                        <img :src="'http://www.zgtxcj.com/'+paid.image" height="100%">
                    </div>
                    <div class="zuan_buy_tx">
                        <p class="zuan_buy_p1">{{ paid.name }}专享</p>
                        <div class="zuan_buy_p2">
                            <p style="float: right">{{ paid.num }}个月</p>
                        </div>
                        <div class="zuan_buy_mon">
                            实付款：￥{{ paid.dpayprice*paid.num }}
                        </div>
                    </div>
                </div>
                </a>
            </div>
        </div>
    </div>
</div>
{% endverbatim %}
{% endblock %}

{% block base_script %}
    var tabs = new Vue({
        el:'#tabs',
        data:{
            allTab: [],
            pengTab:[],
            paidTab:[],
            loding:false,
            phone: localStorage.getItem('phone'),
            pass: localStorage.getItem('pass'),
        },
        methods: {
            getTabs:function(){
                var self=this;
                self.phone=localStorage.getItem('phone');
                self.pass=localStorage.getItem('pass');
                reqwest({
                    url:'http://api.zgtxcj.com/mobile/userorder/',
                    method:'post',
                    type:'json',
                    data:{
                        uid:localStorage.getItem('uid'),
                        status:3,
                        tag:'detail',
                        pag:1
                    },
                    success:function(resp){
                        for (var l in resp['data']){
                            // console.log(resp)
                            if(resp['data'][l]['image'].indexOf('|')!=-1){
                                resp['data'][l]['image']=resp['data'][l]['image'].split('|')[0];
                            }
                            self.allTab.push(resp['data'][l]);
                        }
                        self.getPending();
                        self.loding = true;
                    }
                })
            },
            getPending:function(){
                var self=this;
                reqwest({
                    url:'http://api.zgtxcj.com/mobile/userorder/',
                    method:'post',
                    type:'json',
                    data:{
                        uid: localStorage.getItem('uid'),
                        status:1,
                        tag:'detail',
                        pag:'1'
                    },
                    success:function(resp){
                        for (var l in resp['data']){
                            if(resp['data'][l]['image'].indexOf('|')!=-1){
                                resp['data'][l]['image']=resp['data'][l]['image'].split('|')[0];
                            }
                            self.pengTab.push(resp['data'][l]);
                        }
                        self.getPaid()
                    }
                })
            },
            getPaid:function(){
                var self=this;
                reqwest({
                    url:'http://api.zgtxcj.com/mobile/userorder/',
                    method:'post',
                    type:'json',
                    data:{
                        uid: localStorage.getItem('uid'),
                        status:2,
                        tag:'detail',
                        pag:'1'
                    },
                    success:function(resp){
                        for (var l in resp['data']){
                            if(resp['data'][l]['image'].indexOf('|')!=-1){
                                resp['data'][l]['image']=resp['data'][l]['image'].split('|')[0];
                            }
                            self.paidTab.push(resp['data'][l]);
                        }
                        self.getDong();

                    }
                })
            },
            getDong:function(){
                this.$nextTick(function () {
                    $('.xuan_li').click(function () {
                        var index=$(this).index();
                        $('.xuan_li').removeClass('xuan_active').eq(index).addClass('xuan_active');
                        if(index==0){
                            $('.zuan_all').css('display','block');
                            $('.zuan_unpaid').css('display','none');
                            $('.zuan_paid').css('display','none');
                        }else if(index==1){
                            $('.zuan_all').css('display','none');
                            $('.zuan_unpaid').css('display','block');
                            $('.zuan_paid').css('display','none');
                        }else if(index==2){
                            $('.zuan_all').css('display','none');
                            $('.zuan_unpaid').css('display','none');
                            $('.zuan_paid').css('display','block');
                        }
                    })
                })
            },
            run:function () {
                this.getTabs();
            }
        },
    })
{% endblock %}
